In this tutorial, we’ll create a responsive admin dashboard layout with CSS and a touch of JavaScript. To build it, we’ll borrow some ideas from the WordPress dashboard, such as its collapsible sidebar menu.

Throughout the tutorial, we’ll face plenty of challenges, but ones that will give us good practice for enhancing our front-end skills. There’s also a video version which you can watch if you prefer.

Let’s have a look at the final admin dashboard demo. Pay attention to the following things:

To kick off the markup we’ll need an SVG, a header, and a section:

As you might imagine with any admin dashboard we’re going to need a bunch of icons. Thankfully, Envato Elements provides an ever-expanding collection of useful vector icons, so let’s take advantage of that library and download these Trade and Dashboard Icons.

Rather than including them directly on the page via an img or svg tag, let’s go one step further and create an SVG sprite. To do this, we’ll wrap all the icons in an SVG container. The container should be hidden, so we’ll apply display: none to it. If we don’t hide it, a big empty area will appear at the top of the page.

Each icon will be placed inside a symbol element with a unique ID and a viewBox attribute which will depend on the icon size. We can then render the target icon whenever we need it by calling the use element (I’ll show you how in a minute). 

Additionally, we’ll put our logo within this container. 

Later, we’ll examine how the colors of these SVGs will change depending on the theme mode, but for now let’s just become familiar with the markup needed for the SVG sprite:

And really, that’s all we need to create our inline SVG sprite.

Moving on with our admin dashboard layout, let’s look at the page header. 

Within it, we’ll define a nav element that will serve as the wrapper for the following elements:

Here’s how it’ll look like on wide screens (>767px):

The header structure:

Notice two things in the code above:

The section will contain two nested sections.

Inside the first section, we’ll place the search form and some info (name, avatar, and notifications) about the current logged-in user.

Here’s its appearance on wide screens (>767px):

The section structure:

Again, notice that we add some ARIA attributes to the submit button.

Inside the second section, just for enriching the demo with some dummy content, we’ll place a bunch of article placeholders. These might typically contain tabular data, charts, or feeds of some kind.

Here’s its appearance on wide screens (>767px):

The section structure:

With the markup for our admin dashboard ready, we’ll forge on with the CSS. The first step, as always, is to specify some CSS variables and common reset styles:

At this point, we’re ready to concentrate on the page styles.

The header will be a fixed position element. Its width will be 220px, and its height equal to the viewport height. In case its contents exceed the viewport height, a vertical scrollbar will appear.

The nav element will behave as a flex container with a minimum height of 100%. Remember that its direct children are three: 

The toggle button will be visible only on small screens ( * { 16 width: 100%; 17 padding: 12px 15px; 18 } 19 20 .page-header .admin-menu .menu-heading h3 { 21 text-transform: uppercase; 22 letter-spacing: 0.15em; 23 font-size: 12px; 24 margin-top: 12px; 25 color: var(--page-header-headingColor); 26 } 27 28 .page-header .admin-menu a, 29 .page-header .admin-menu button { 30 display: flex; 31 align-items: center; 32 font-size: 0.9rem; 33 } Toggling Dark and Light Themes

To build the switch, we’ll borrow quite a lot of styles from another tutorial which explains how to create a toggle switch. Be sure to have a look and learn how we implement it with the CSS checkbox hack technique.

Our dashboard will support two theme options: the light option and the dark one. By default, the dark will be active and look like this:

When we click on the switch its appearance will change as follows:

Here are the associated styles:

Remember that the .page-content section contains two sub-sections.

This section will be placed 220px away from the left side of the viewport. Plus, we’ll give it width: calc(100% - 220px). Note that its left property value is equal to the header width.

Its styles:

Also, remember that the .search-and-user section contains two elements: the search form and the .admin-profile.

To lay it out, we’ll use CSS Grid. The search form will cover the full available space, and there will be a 50px gap between it and its sibling. Both siblings will be vertically aligned.

The submit button inside the form will be absolutely positioned. It will only contain a decorative icon, and we’ll therefore need an ARIA attribute to allow screenreaders to interpret it and thereby make it accessible.

The .admin-profile, which contains two elements, will behave as a flex container with vertically centered content. The badge (counter) element will be absolutely positioned inside its parent with horizontally and vertically centered content.

Here’s a part of the required styles for this section:

To lay out the articles on our admin dashboard, we’ll take advantage of CSS Grid. We’ll give all articles a fixed height of 300px. Apart from the first and last articles which will cover the full parent width, all the others will be part of a two-column layout.

The associated styles:

Each time we click on the collapse/expand button, the header state will change. If it’s expanded, it will collapse (leaving just icon variants of the menu items), and vice versa. 

Keep in mind that this functionality will be available only on screens greater than 767px. For smaller screens, our header will have a different layout, which we’ll get to shortly.

During the collapsed state of the header, the body element receives the collapsed class. At that point, the following things happen:

Here’s the JavaScript code that implements this functionality:

And all the associated styles:

Each time we click on the toggle switch, the dashboard colors will change.

Remember that initially the dark mode will be enabled. But, as soon as the light mode becomes active, the html element will receive the light-mode class.

This class will update/override the values of many of the predefined CSS variables (especially the color ones) and hence change the theme appearance.

Here’s the required JavaScript code:

And the associated styles:

But we haven’t finished yet! It would be really nice if we could store the user’s theme preference and enable it each time they revisit the admin. We can achieve this by taking advantage of local storage.

Let’s look at the JavaScript code that will handle this logic:

From here, you can go deeper and make even more complex assumptions by using the prefers-color-scheme CSS media feature. For example, if the user hasn’t selected any mode, you can display the one that respects their operating system preference. But for now, let’s keep things simple.

At this point, let’s add another new feature to the collapsible header.

As we discussed in the previous section, when the header becomes collapsed, the text of the menu links will disappear. This means, at that point, only the SVG icons will be visible. So, let’s display a tooltip that will give users a better understanding of what each link does.

To do so, each time a menu link (icon) is being hovered over, we’ll add the title attribute to it, with the value being its span’s text. But again, that should happen only when the header is collapsed and the window width is at least 768px.

Here’s the corresponding JavaScript: 

On screens up to 767px wide, our page will look like this:

That’s a big difference from our sidebar arrangement, right? Let’s highlight the most important differences compared to the desktop version:

Below you can see a part of the responsive styles:

Each time we click on the toggle button, the menu state will change. If it’s expanded, it will collapse, and vice versa.

During the expanded state of the menu, the body element receives the mob-menu-opened class. At that point, the following things happen:

Here’s the required JavaScript code:

And the associated CSS:

That’s it, folks! We successfully built a fully functional admin dashboard layout. You’ll be able to expand on this foundation to create all kinds of admin interfaces. Hopefully, you enjoyed this journey as much as I did!

Just a last note: I’m certainly not an accessibility expert, yet I tried to make this UI more accessible by adding some common ARIA attributes. During this process, I checked the WordPress and CodePen dashboards for reference. There might be additional ARIA attributes that could have been included in the code. For example, I excluded the aria-controls attribute which is responsible for identifying the related content, but that was because Aria-Controls is Poop.

As a next step, make sure to optimize the code by using a CSS preprocessor and group the JavaScript code into functions. And if you plan to use this admin in a real project, I’d love to know it!

As always, thanks for reading!

Learn how to build a simple responsive admin dashboard UI, which features a collapsible sidebar, icons, and a dark mode toggle switch.